<template>
	<div>

		<!-- 新增按钮 -->
		<el-button style="margin-bottom: 20px;" type="primary" size="small" icon="el-icon-plus" @click="openVideoForm(false)">添加视频</el-button>
		<!-- 视频列表 -->
		<el-table :data="videos" v-loading="loading">
			<el-table-column label="封面" align="center">
				<template slot-scope="scope">
					<el-image :src="scope.row.coverUrl" fit="cover" :preview-src-list="urls"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="名称" prop="name" align="center"></el-table-column>
			<el-table-column label="介绍" prop="title" align="center"></el-table-column>
			<el-table-column label="播放地址" prop="videoUrl" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-switch :value="scope.row.status" :active-value="0" :inactive-value="1" @change="updateStatus(scope.row)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-view" @click="playVideo(scope.row)">播放</el-button>
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="openVideoForm(scope.row)">修改</el-button>
					<el-button type="text" size="small" icon="el-icon-delete" @click="deleteVideo(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column label="排序" align="center">
				<template slot-scope="scope">
					<div class="btn-sort-wrap">
						<el-button type="text" size="small" icon="el-icon-arrow-up" @click="sort(scope.row.id, 1)" title="上移"></el-button>
						<el-button type="text" size="small" icon="el-icon-arrow-down" @click="sort(scope.row.id, 0)" title="下移"></el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 视频表单 -->
		<el-dialog :title="`${videoForm.id ? '编辑' : '添加'}视频`" :visible.sync="showVideoForm" width="30vw" top="8vh">
			<el-form label-width="80px">
				<el-form-item label="视频封面">
					<image-uploader
						:imageUrl.sync="videoForm.coverUrl"
						uploadUrl="/video/uploadCover"
						height="180px">
					</image-uploader>
				</el-form-item>
				<el-form-item label="视频地址">
					<el-input v-model="videoForm.videoUrl" placeholder="如：https://www.mi.com/video/...">
						<video-uploader slot="append" 
							:videoUrl.sync="videoForm.videoUrl"
							uploadUrl="/video/uploadVideo">
						</video-uploader>
					</el-input>
				</el-form-item>
				<el-form-item label="视频名称">
					<el-input v-model="videoForm.name" placeholder="请输入视频名称" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="视频描述">
					<el-input v-model="videoForm.title" placeholder="请输入视频描述" maxlength="200" type="textarea" :autosize="{minRows: 3}"
					 resize="none"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="showVideoForm = false">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 视频播放弹窗 -->
		<el-dialog :title="video.name" :visible.sync="isPlaying">
			<video v-if="isPlaying" class="video" :src="video.videoUrl" autoplay controls></video>
		</el-dialog>

	</div>
</template>

<script>
	import videoUploader from '@/components/uploader/video-uploader.vue';
	
	export default {
		components: {
			videoUploader
		},
		data() {
			return {
				videos: [],
				loading: false,
				videoForm: {
					name: '',
					title: '',
					coverUrl: '',
					videoUrl: ''
				},
				showVideoForm: false,
				isPlaying: false,
				video: {}
			}
		},
		computed: {
			urls() {
				return this.videos.map(e => e.coverUrl);
			}
		},
		created() {
			this.findVideos();
		},
		watch: {
			showVideoForm(e) {
				if (!e) {
					this.videoForm = {
						name: '',
						title: '',
						coverUrl: '',
						videoUrl: ''
					};
				}
			}
		},
		methods: {
			findVideos() {
				this.loading = true;
				this.$util.request('/video', {}, (res) => {
					this.loading = false;
					this.videos = res;
				}, true);
			},
			updateStatus(item) {
				this.$util.requestWithConfirm(`确定${item.status == 0 ? '下架' : '上架'}该视频吗？`, '/video/updateStatus', {
					id: item.id
				}).then(_ => {
					this.findVideos();
				});
			},
			deleteVideo(id) {
				this.$util.requestWithConfirm(`确定删除该视频吗？`, '/video/delete', {
					id
				}).then(_ => {
					this.findVideos();
				});
			},
			playVideo(item) {
				this.video = item;
				this.isPlaying = true;
			},
			openVideoForm(item) {
				if (item) {
					const {
						id,
						name,
						title,
						coverUrl,
						videoUrl
					} = item;
					this.videoForm = {
						id,
						name,
						title,
						coverUrl,
						videoUrl
					};
				}
				this.showVideoForm = true;
			},
			submitForm() {
				if (!this.videoForm.coverUrl) return this.$util.msg('请选择封面图片');
				if (!this.videoForm.videoUrl) return this.$util.msg('请输入视频地址');
				if (!this.videoForm.name) return this.$util.msg('请输入视频名称');

				this.$util.requestWithConfirm('确定提交吗？', `/video/${this.videoForm.id ? 'update' : 'save'}`, this.videoForm).then(_ => {
					this.showVideoForm = false;
					this.findVideos();
				});
			},
			sort(id, direction) {
				this.loading = true;
				this.$util.request('/video/sort', {
					id,
					direction
				}, (res) => {
					this.loading = false;

					if (res.state == 'ok') {
						this.findVideos();
					} else {
						this.$util.msg(res.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.video {
		width: 100%;
		height: 100%;
	}
</style>
